<template>
  <div class="body">
    <nut-navbar @on-click-back="$router.back()" :rightShow="false">开发票</nut-navbar>
    <div class="container bg-f9">
      <div class="box m-t-15">
        <div class="top c-fff">发票信息包含：发票抬头、税号、单位地址、电话号码、开户银行、银行账户号</div>
        <div class="textarea">
          <textarea placeholder="*在此处粘贴" v-model="info"></textarea>
        </div>
      </div>
      <div class="tip l-h-40 f-s-10 text-center">
        请粘贴您的发票信息文本！一经开出，恕不退还！
      </div>
      <div class="box">
        <div class="line dis-flex l-h-40">
          <div class="title m-r-10">*发票类型选择</div>
          <div class="content">
            <nut-radio v-model="radioVal" :label="1">增值税普票</nut-radio>
            <nut-radio v-model="radioVal" :label="2">增值税专票</nut-radio>
          </div>
        </div>
        <div class="line dis-flex align-items-c">
          <div class="title m-r-10 l-h-40">*发票接收邮箱</div>
          <div class="content">
            <div class="input">
              <input placeholder="请填写邮箱，用于接收发票" v-model="email" />
            </div>
          </div>
        </div>
        <div class="line dis-flex align-items-c m-b-5">
          <div class="title m-r-10 l-h-40">发票接收手机号</div>
          <div class="content">
            <div class="input">
              <input placeholder="用于接收发票进度通知" v-model="phone" />
            </div>
          </div>
        </div>
      </div>
      <div class="tip text-center l-h-40 f-s-10">请核对开票信息，避免出错</div>
      <div class="bottom-btn dis-block c-fff text-center l-h-40 m-t-20 row" @click="submit">提交开票信息</div>
    </div>
  </div>
</template>

<script>
  import { isEmpty, isTelphone, isEmail } from '../../utils/rules'
  import { invoiceApi } from '../../api/invoice'
  import _ from 'lodash'
  export default {
    data() {
      return {
        radioVal: 1,
        info: '',
        phone: '',
        email: ''
      }
    },
    methods: {
      submit () {
        const error = isTelphone(this.phone, '请输入正确的电话')
          || isEmpty(this.info, '请输入发票信息')
          || isEmail(this.email, '请输入正确邮箱')
        if (error) {
          return this.$toast.text(error)
        }
        const data = {
          orderId: this.$route.query.orderId,
          billInfo: this.info,
          phone: this.phone,
          email: this.email,
          billType: this.radioVal
        }
        try {
          this.$throttle(async () => {
            const res = await invoiceApi(data)
            if (res === 1) {
              this.$toast.text('开票成功')
              this.$router.back()
            } else {
              this.$toast.text('开票失败')
            }
          })
        } catch (e) {
          this.$toast.text(e || '服务异常')
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .bg-f9 {
    top: 40px;
  }
  .box {
    background: #ffffff;
    border-radius: 5px;
    overflow: auto;
    .top {
      padding: 5px;
      box-sizing: border-box;
      background: #1C1C1B;
    }
    .textarea {
      margin: 15px;
      padding: 5px;
      box-sizing: border-box;
      border: 1px #ddd solid;
      textarea {
        min-height: 60px;
        border: none;
        outline: none;
      }
    }
    .line {
      padding: 0 15px;
      box-sizing: border-box;
      .title {
        width: 90px;
      }
      .content {
        .input {
          border: 1px #ddd solid;
          padding: 5px;
          box-sizing: border-box;
          input {
            border: none;
            outline: none;
          }
        }
      }
    }
  }
  .tip {
    color: #ff0000;
  }
  .bottom-btn {
    background: #B29462;
  }
</style>
